<template>
    <div class="page-bg">
        <com-header />
        <div class="content mt-20">
            <div class="searchbar df ai-c jc-b">
                <div class="df ai-c">
                    <div class="tt c-99">排序</div>
                    <div class="df ai-c">
                        <div class="item" :class="{active:search.order_by=='default'}" @click="changeSort('default')">默认</div>
                        <div class="item df ai-c" :class="{active:search.order_by=='createtime'}" @click="changeSort('createtime')">
                            <div>创建时间</div>
                            <div class="sort df df-c jc-c">
                                <el-icon class="icon" :size="14" :color="(search.order_by=='createtime'&&search.sort=='asc')?'#428bca':'#cccccc'" style="transform: translateY(4px);"><CaretTop /></el-icon>
                                <el-icon class="icon" :size="14" :color="(search.order_by=='createtime'&&search.sort=='desc')?'#428bca':'#cccccc'" style="transform: translateY(-3px);"><CaretBottom /></el-icon>
                            </div>
                        </div>
                        <div class="item df ai-c" :class="{active:search.order_by=='price'}" @click="changeSort('price')">
                            <div>价格</div>
                            <div class="sort df df-c jc-c">
                                <el-icon class="icon" :size="14" :color="(search.order_by=='price'&&search.sort=='asc')?'#428bca':'#cccccc'" style="transform: translateY(4px);"><CaretTop /></el-icon>
                                <el-icon class="icon" :size="14" :color="(search.order_by=='price'&&search.sort=='desc')?'#428bca':'#cccccc'" style="transform: translateY(-3px);"><CaretBottom /></el-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="applist mt-20 df df-ww">
                <goodsItem v-for="item in list" :data="item" :key="item" @click="toDetail(item)" />
            </div>
            <div class="df ai-c jc-c">
                <el-pagination
                    v-model:current-page="page"
                    :page-count="last_page"
                    background layout="prev, pager, next"
                    @current-change="getData"
                />
            </div>
        </div>
    </div>
</template>

<script>
import comHeader from "@/components/com-header.vue";
import goodsItem from "@/components/goods-item.vue";

import myAxios from "@/utils/index";
export default {
    components: { comHeader, goodsItem },
    data(){
        return {
            page: 1,
            page_size: 25,
            last_page: 1,
            search: {
                title: "",
                order_by: "default",
                sort: "desc",
            },
            list: [],
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            myAxios.get("/ddd-order/goods-index",{params:{
                page: this.page,
                page_size: this.page_size,
                ...this.search,
            }}).then(res=>{
                if(!res?.data){return}
                this.list = res.data.data;
                this.last_page = res.data.last_page;
            });
        },
        changeSort(sort){
            if(this.search.order_by!=sort){
                this.search.sort = 'asc';
            }else{
                this.search.sort = this.search.sort=='asc'?'desc':'asc';
            }
            this.search.order_by = sort;
            this.page = 1;
            this.getData();
        },
        toDetail(item){
            this.$router.push("/goods-detail/"+item.id);
        },
    },
}
</script>

<style scoped>
.content{width:1200px; margin-left:auto; margin-right:auto;}
.applist{margin-left:-10px; margin-right:-10px;}

.searchbar{padding:0 24px; height:56px; background:#ffffff;}
.searchbar .tt{width:70px;}
.searchbar .item{margin-right:24px; cursor:pointer;}
.searchbar .item.active{color:var(--theme);}
.searchbar .item .sort{margin-left:2px;}
</style>